<template>
<div class="coinCharging container_common">
    <div class="chooseCoin c222">
        <van-cell :title="i18n.bz" is-link :value="currency" to="/assets/chooseCoin" />
    </div>
    <!-- -->
    <div class="addressPic1" v-if="currency=='USDT'">
        <van-cell :title="i18n.lm" is-link @click="selectHandle">
            <span slot="default">{{names}}</span>
        </van-cell>
    </div>
    <div class="addressPic">
        <p class="title c222">{{i18n.ndcbdz}}</p>
        <!-- <img src="../../assets/images/home/qrcode.png" alt class="qrcode" /> -->
        <vue-qr :text="copyAddress" :size="220" class="qrcode" :callback="qrcodeCallback"></vue-qr>
        <span class="savePicBtn bor_t c222" @click="savePic">{{i18n.bcewm}}</span>
    </div>
    <div class="addressPic">
        <textarea id="target" type="text" readonly class="num c333" :value="copyAddress"></textarea>
        <button class="savePicBtn bor_t c222" data-clipboard-action="copy" data-clipboard-target="#target" v-if="copyAddress" @click="copythat(copyAddress)">{{i18n.fzdz}}</button>
        <button class="savePicBtn bor_t c222" v-else>{{i18n.fzdz}}</button>
    </div>
    <div class="tipDetail">
        <!-- <div v-if="currency=='USDT'"> -->
        <p>{{i18n.zxczje}}{{min_rechange_value}}{{currency}}{{i18n.bhdz}}</p>
        <!-- <p v-else>* 最小充值金额：10.0USDT,小于最小金额的充值将不会到账。</p> -->
        <p>{{i18n.qwcz}}{{currency}}{{i18n.bkzh}}</p>
        <p>{{i18n.qqb}}</p>
        <!-- </div> -->
        <!-- <div v-else> -->
        <p>{{i18n.zxczje}}{{min_rechange_value}}{{currency}}{{i18n.bhdz}}</p>
        <p>{{i18n.qwcz}}{{currency}}{{i18n.bkzh}}</p>
        <!-- </div> -->
    </div>
    <!-- 联系客服 -->
    <div class="customer-service c222">
        <div class="tit">{{i18n.qlxkf}}</div>
        <div class="tit flex-center" @click="copythat('FVT213')">
            <div class="i-block">
                {{i18n.wxh}}<span class="color-red">FVT213</span>
                <img src="../../assets/images/user/fuzhi.png" class="img" />
            </div>
        </div>
        <img class="img" src="../../assets/images/customerService.png" alt="" @click="check" />
    </div>
    <!-- 放大 -->
    <div v-if="isShow" class="check" @click="check">
        <img class="img" src="../../assets/images/customerService.png">
    </div>
    <van-action-sheet v-model="isSelect" :actions="actions" :cancel-text="i18n.qx" title @cancel="onCancel" @select="onSelect" color="”#3D77E0“" />
    <van-dialog v-model="popShow" class="transactionPop c333" :title="i18n.cztx" :showConfirmButton="false" show-cancel-button :cancelButtonText="i18n.wzdl">
        <div class="pad_15">
            {{i18n.sxfsqfs}}
            <span class="orange_text">{{i18n.czje}}{{min_rechange_value}}{{currency}}</span> {{i18n.bndz}}
        </div>
    </van-dialog>
</div>
</template>

<script>
import {
    mapActions
} from "vuex";
import assetItem from "../../components/assetItem";
import vueQr from "vue-qr";
export default {
    components: {
        assetItem,
        vueQr
    },

    data() {
        return {
            // 显示大图
            isShow: false,
            currency: "", //当前币种
            copyAddress: "",
            saveImg: "",
            isSelect: false, //弹框
            names: "ERC20",
            actions: [{
                    name: "ERC20"
                },
                {
                    name: "OMNI"
                }
                // { name: "系统" },
                // { name: "转入" },
                // { name: "转出" }
            ],
            popShow: false,
            min_rechange_value: 0, //最小充币数
            rechangeList: [{
                    name: "BTC",
                    value: 0.001
                },
                {
                    name: "ETH",
                    value: 0.01
                },
                {
                    name: "EOS",
                    value: 0.5
                },
                {
                    name: "BCH",
                    value: 0.01
                },
                {
                    name: "LTC",
                    value: 0.01
                },
                {
                    name: "DASH",
                    value: 0.01
                },
                {
                    name: "XRP",
                    value: 10
                }
            ]
        };
    },
    computed: {
        i18n() {
            return this.$t("coin");
        },
        userId() {
            return this.$store.state.userId;
        },
        chooseCurrency() {
            return this.$store.state.chooseCurrency;
        }
    },
    methods: {
        ...mapActions([
            "setnavTitle",
            "setnavBarState",
            "settabBarState",
            "setbackRouter",
            "setnavBarArrow",
            "setnavBarBgColor",
            "setnavBarShowRight"
        ]),
        init() {
            this.setnavTitle(this.i18n.cb);
            this.setbackRouter("");
            this.setnavBarState(true);
            this.settabBarState(false);
            this.setnavBarArrow(true);
            setTimeout(() => {
                this.setnavBarShowRight(true);
            }, 100)
        },
        check() {
            this.isShow = !this.isShow;
        },
        copythat: function (text) {
            var self = this;
            if (!text) {
                return this.Toast(this.i18n.fzsb);
            }
            var clipBoard = api.require("clipBoard");
            clipBoard.set({
                    value: text
                },
                function (ret, err) {
                    if (ret) {
                        return self.Toast(this.i18n.fzcg);
                    } else {
                        return self.Toast(this.i18n.fzsb);
                    }
                }
            );
        },
        //查询资产列表
        getBalances() {
            let data = {
                member: this.userId,
                balanceType: "BALANCE_BB"
            };
            this.$get("member/balance/getBalances", data).then(res => {
                if (res && res.status == "SUCCEED" && res.result) {
                    let iindex = "";
                    res.result.forEach((ele, i) => {
                        if (ele.currency == "BTC") {
                            iindex = i;
                        }
                    });
                    this.currency = this.chooseCurrency ?
                        this.chooseCurrency :
                        res.result[iindex] ?
                        res.result[iindex].currency : "";

                    this.getRechargeMinLimit();
                    this.popShow =
                        this.currency == "USDT" && this.names == "ERC20" ? true : false;
                    if (this.currency == "USDT") {
                        this.getUsdtAddress();
                    } else {
                        this.initData();
                    }
                    // this.initData();
                }
            });
        },
        //当前是usdt时
        getUsdtAddress() {
            let data = {
                member: this.userId,
                type: this.names
            };
            this.$get("member/balance/getUsdtWallet", data).then(res => {
                if (res && res.status == "SUCCEED" && res.result) {
                    this.copyAddress = res.result.wallet || "";
                }
            });
        },
        //获取充币地址
        initData() {
            let data = {
                member: this.userId,
                currency: this.currency
            };
            this.$get("member/balance/getWallet", data).then(res => {
                if (res && res.status == "SUCCEED" && res.result) {
                    this.copyAddress = res.result.wallet || "";
                }
            });
        },
        //获取充值最小值
        getRechargeMinLimit() {
            let currency =
                this.currency == "USDT" ?
                this.names == "ERC20" ?
                "USDT/ERC20" :
                "USDT/OMNI" :
                this.currency;
            this.$get("member/quota/recharge_min_limit", {
                currency: currency
            }).then(res => {
                if (res && res.status == "SUCCEED" && res.result) {
                    // this.copyAddress = res.result.wallet || "";
                    this.min_rechange_value = res.result || 0;
                } else {
                    this.rechangeList.map(item => {
                        if (item.name == this.currency) {
                            this.min_rechange_value = item.value;
                        }
                    });
                }
            });
        },

        //保存图片
        savePic() {
            let imgsrc = this.saveImg;
            if (!imgsrc) {
                return;
            }
            var _this = this;
            _this.$util.showLoading();
            imgsrc = imgsrc.replace("data:image/png;base64,", "");
            setTimeout(res => {
                _this.Toast.clear();
            }, 10000);
            if (_this.$util.confirmPer("photos", this.i18n.cc)) {
                var trans = api.require("trans");
                // console.log(JSON.stringify(trans));
                // console.log(imgsrc);
                trans.saveImage({
                        base64Str: imgsrc,
                        imgPath: "fs://BitFutres/",
                        album: true,
                        imgName: "address" + Math.random() * 10 + ".png"
                    },
                    function (ret, err) {
                        _this.Toast.clear();
                        // console.log(JSON.stringify(ret));
                        if (ret.status) {
                            _this.Toast(this.i18n.ybc);
                        } else {
                            _this.Toast(this.i18n.bcsb);
                        }
                    }
                );
            } else {
                _this.Toast.clear();
            }
        },
        // 生成二维码路径
        qrcodeCallback(dataUrl, id) {
            this.saveImg = dataUrl || "";
        },
        //财产记录筛选事件
        selectHandle() {
            this.isSelect = true;
        },
        onCancel() {
            this.isSelect = false;
        },
        onSelect(item) {
            this.isSelect = false;
            if (this.names == item.name) {
                return;
            }
            this.names = item.name;
            this.getUsdtAddress();
            this.getRechargeMinLimit();
        }
    },
    mounted() {
        var _this = this;
        this.init();
        this.getBalances();
    },
    destroyed() {
        this.setnavBarShowRight(false);
    }
};
</script>

<style lang="scss">
@import "@/assets/scss/theme.scss";

.coinCharging {
    @include base-background();

    .transactionPop {
        @include base-background();
    }

    .van-cell__value {
        // color: #222222;
    }

    .chooseCoin {
        .van-cell {
            display: flex;
            align-items: center;
            background: #f8f7fd;
        }
    }

    .van-popup--bottom.van-popup--round {
        border-radius: 6px;
    }
}
</style><style lang="scss" scoped>
@import "@/assets/scss/theme.scss";

.chooseCoin {
    margin: 0 -15px;
}

.addressPic1 {
    font-size: 14px;
    box-shadow: 0px 1px 11px 1px rgba(121, 121, 121, 0.09);
    border-radius: 5px;
    margin-top: 14px;
}

.addressPic {
    @include base-background-second();
    padding: 18px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    box-shadow: 0px 1px 11px 1px rgba(121, 121, 121, 0.09);
    border-radius: 5px;
    margin-top: 14px;

    .qrcode {
        width: 130px;
        height: 130px;
        margin-top: 10px;
    }

    .savePicBtn {
        // color: #222222;
        font-size: 15px;
        padding-top: 15px;
        margin-top: 15px;
        // border-top: 1px solid rgba(227, 227, 227, 0.2);
        width: 100%;
        text-align: center;
        background: transparent;
    }

    .num {
        font-size: 14px;
        word-break: break-all;
        width: 100%;
        border: none;
        background: none;
    }
}

.tipDetail {
    color: #999999;
    font-size: 12px;
    margin-top: 30px;
    line-height: 18px;
}

.customer-service {
    width: 100%;
    margin-top: 20px;
    text-align: center;

    .img {
        width: 200px;
        height: 200px;
        margin: 5px auto;
        display: block;
    }

    .color-red {
        color: red;
    }

    .tit {
        font-size: 18px;
    }

    .i-block {
        display: inline-block;

        .img {
            display: inline-block;
            margin-top: 0;
            margin-left: 5px;
            width: 15px;
            height: 15px;
        }
    }

    .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;

    }
}

.check {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    left: 0;
    background: rgba(0, 0, 0, 00.9);

    .img {
        width: 300px;
        height: 300px;
    }
}
</style>
